<template>
	<div class="program">
		<div class="program_title">歌曲类节目</div>
		<div class="program_list1" v-for='(item,index) in programList.list1' @click="list1(item.program_id,index)" :class="item.status ? 'pro_active':''">
			<div class="program_name">
				{{item.dname}} -- {{item.name}}
			</div>
			<div class="program_status" v-if="program_status">
				<img v-if='item.status' src="https://o6wndwjxn.qnssl.com/%E9%80%89%E4%B8%AD.svg" alt="">
				<img v-else src="https://o6wndwjxn.qnssl.com/%E6%9C%AA%E9%80%89%E4%B8%AD.svg" alt="">
			</div>
			<div class="program_number" v-else>{{item.vote}}票</div>
		</div>
		
		<div class="program_title">舞蹈类节目</div>
		<div class="program_list1" v-for='(item,index) in programList.list2' @click="list2(item.program_id,index)" :class="item.status ? 'pro_active':''">
			<div class="program_name">
				{{item.dname}} -- {{item.name}}
			</div>
			<div class="program_status"  v-if="program_status">
				<img v-if='item.status' src="https://o6wndwjxn.qnssl.com/%E9%80%89%E4%B8%AD.svg" alt="">
				<img v-else src="https://o6wndwjxn.qnssl.com/%E6%9C%AA%E9%80%89%E4%B8%AD.svg" alt="">
			</div>
			<div class="program_number" v-else>{{item.vote}}票</div>
		</div>
		
		<div class="program_title">综艺类节目</div>
		<div class="program_list1" v-for='(item,index) in programList.list3' @click="list3(item.program_id,index)" :class="item.status ? 'pro_active':''">
			<div class="program_name">
				{{item.dname}} -- {{item.name}}
			</div>
			<div class="program_status" v-if="program_status">
				<img v-if='item.status' src="https://o6wndwjxn.qnssl.com/%E9%80%89%E4%B8%AD.svg" alt="">
				<img v-else src="https://o6wndwjxn.qnssl.com/%E6%9C%AA%E9%80%89%E4%B8%AD.svg" alt="">
			</div>
			<div class="program_number" v-else>{{item.vote}}票</div>
		</div>
		
		
		<div class="program_button" @click="program_button" v-show="pro_btn_status">投票</div>
		
		
		<div class="program_tips" v-show="program_tips_status" @click="program_tips_click">
			<div>一个类目只能提交3个</div>
		</div>
		<div class="program_submit" v-show="program_submit_status">
			<div class="pr_su_box">
				<div class="pr_su_title">重要提示</div>
				<div class="pr_su_tips">您只有一次投票的机会,是否确认投票</div>
				<div class="pr_su_btn">
					<div @click="program_sub_true">投票</div>
					<div @click="program_sub_false">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				programList:[],
				programId:{list1:[],list2:[],list3:[]},
				program_tips_status:false,
				program_submit_status:false,
				program_status:true,
				pro_btn_status:true
			};
		},
		// program_list
		created(){
			this.getProgram()
			// this.program_see()
		},
		methods:{
			getProgram(){
				let requery = {
					member_id: this.$store.state.member_id
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/program_list',requery).then(res=>{
					let {code,data} = res.data
					if(code == 200){
						// console.log(data)
						if(data.res == 0){
							// console.log('没投票')
							for(var i = 0 ; i <data.list1.length ; i++){
								data.list1[i].status = false
							}
							for(var i = 0 ; i <data.list2.length ; i++){
								data.list2[i].status = false
							}
							for(var i = 0 ; i <data.list3.length ; i++){
								data.list3[i].status = false
							}
							this.programList = data
						}else{
							// console.log('投过了')
							this.pro_btn_status = false
							this.program_status = false
							this.program_see()
						}
					}
					
				})
			},
			program_tips_click(){
				this.program_tips_status = false
			},		
			list1(id,index){
				if(!this.program_status)return
				if(this.programList.list1[index].status == true){
					this.programList.list1[index].status = false
					for(var i = 0; i < this.programId.list1.length ; i ++){
						if(this.programId.list1[i] == id){
							this.programId.list1.splice(i,1)
						}
					}
				}else{
					if(this.programId.list1.length >= 3){
						this.program_tips_status = true
						setTimeout(()=>{
							this.program_tips_status = false
						},2000)
					}else{
						this.programList.list1[index].status = true
						this.programId.list1.push(id)
					}
				}
			},
			list2(id,index){
				if(!this.program_status)return
				if(this.programList.list2[index].status == true){
					this.programList.list2[index].status = false
					for(var i = 0; i < this.programId.list2.length ; i ++){
						if(this.programId.list2[i] == id){
							this.programId.list2.splice(i,1)
						}
					}
				}else{
					if(this.programId.list2.length >= 3){
						this.program_tips_status = true
						setTimeout(()=>{
							this.program_tips_status = false
						},2000)
					}else{
						this.programList.list2[index].status = true
						this.programId.list2.push(id)
					}
				}
			},
			list3(id,index){
				if(!this.program_status)return
				if(this.programList.list3[index].status == true){
					this.programList.list3[index].status = false
					for(var i = 0; i < this.programId.list3.length ; i ++){
						if(this.programId.list3[i] == id){
							this.programId.list3.splice(i,1)
						}
					}
				}else{
					if(this.programId.list3.length >= 3){
						this.program_tips_status = true
						setTimeout(()=>{
							this.program_tips_status = false
						},2000)
					}else{
						this.programList.list3[index].status = true
						this.programId.list3.push(id)
					}
				}
			},
			
			program_see(){
				let requery = {
					member_id: this.$store.state.member_id
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/program_list_data',requery).then(res=>{
					// console.log('投票结果',res)
					let {code ,data} = res.data
					if(code == 200){
						this.programList = data
					}
				})
			},
			
			program_button(){
				this.program_submit_status = true
			},
			program_sub_true(){
				this.program_submit_status = false
				this.pro_btn_status = false
				// console.log('发送结果')
				var list1,list2,list3,li1,li2,li3
				list1 =	this.programId.list1,
				list2 = this.programId.list2,
				list3 = this.programId.list3
				li1 = list1.join(',')
				li2 = list2.join(',')
				li3 = list3.join(',')
				let requery = {
					member_id: this.$store.state.member_id,
					list1:li1,
					list2:li2,
					list3:li3
				}
				// console.log(requery)
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/selection',requery).then(res=>{
					let {code, data} =res.data
					if(code == 200){
						this.program_status = false
						this.program_see()
						this.program_submit_status = false
					}
				})
				
			},
			program_sub_false(){
				this.program_submit_status = false
			}
			
			
		}
	}
</script>

<style>
	.pro_active{
		background: #666666 !important;
		color: white;
	}
	
	
	.program_number{
		position: absolute;
		right: 20px;
		top: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #333333;
	}
	
	.program_tips{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		text-align: center;
		z-index: 100;
	}
	.program_tips>div{
		display: inline-block;
		background: rgba(0,0,0,0.8);
		color: white;
		padding: 15px 8px;
		font-size: 12px;
		border-radius: 4px;
		margin-top: 45vh;
	}
	.program_submit{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background: rgba(0,0,0,0.8);
		overflow: hidden;
	}
	.pr_su_box{
		width: 70vw;
		height: 180px;
		background: white;
		margin-left: 15vw;
		margin-top: 35vh;
		text-align: center;
		border-radius: 2px;
		position: relative;
	}
	.pr_su_title{
		font-size: 18px;
		font-weight: bold;
		height: 50px;
		line-height: 50px;
		color: #333333;
	}
	.pr_su_tips{
		font-size: 15px;
		color: #999999;
		padding: 5px 30px;
	}
	.pr_su_btn{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		border-top: 1px solid #CCCCCC;
	}
	.pr_su_btn>div{
		flex: 1;
		font-size: 15px;
	}
	.pr_su_btn>div:first-child{
		color: #3CC51F;
		border-right:1px solid #CCCCCC ;
	}
	
	
	.program{
		overflow: scroll;
		width: 100vw;
		height: 100vh;
		background: #F0F0F0;
	}
	.program_title{
		background: white;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 15px;
		color: #333333;
		font-weight: bold;
		margin-top: 15px;
		border-bottom: 1px solid #F0F0F0;
	}
	.program_title:first-child{
		margin: 0;
	}
	.program_list1{
		background: white;
		font-size: 14px;
		position: relative;
	}
	.program_name{
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		border-bottom: 1px solid #F0F0F0;
	}
	.program_button{
		width: 120px;
		height: 41px;
		background: #DA4131;
		color: white;
		line-height: 41px;
		margin: 30px 0;
		margin-left: calc(50vw - 60px);
		font-size: 15px;
		text-align: center;
		border-radius: 5px;
	}
	.program_status{
		position: absolute;
		right: 20px;
		top: 0;
		width: 40px;
		height: 40px;
	}
	.program_status>img{
		width: 16px;
		height: 16px;
		margin: 12px;
	}
</style>
